lib components / Text

Inline text

Use this component for single words or short snippets. It can be presented by itself or as part of sentence. Examples include data in tables and UI component labels.

Examples Properties Guidelines Notable Changes

import { InlineText } from "@siteimprove/fancylib";

If your text consists of one or more complete sentences, use the paragraph component instead.
If your text functions as the title of page or section, use the heading component instead.

#Examples

The inline text component features various properties for customizing its appearance. Adjust the properties if it helps users complete their tasks. Specifically, by making the text's appearance match its message and importance. Don't make adjustments purely because of aesthetic reasons. The following sections showcase these properties and explain when to use them.

#Default

The componenent's default appearance is best suited for neutral information of regular importance that does not need to be the first thing that user notices.

default

CodeHTML output

<InlineText>default</InlineText>

#Size

Use this property to adjust how attention-grabbing the text should be.

x-small
small (default)
medium
large
x-large
xx-large
xxx-large

CodeHTML output

<InlineText size="xSmall">x-small</InlineText>
<br />
<InlineText size="small">small (default)</InlineText>
<br />
<InlineText size="medium">medium</InlineText>
<br />
<InlineText size="large">large</InlineText>
<br />
<InlineText size="xLarge">x-large</InlineText>
<br />
<InlineText size="xxLarge">xx-large</InlineText>
<br />
<InlineText size="xxxLarge">xxx-large</InlineText>

#Tone

Use this property to make the text's color support its semantic message.

neutral-dark

neutral-light (dark background) - background not included, just added so you can see here)

positive
negative
warning
subtle

CodeHTML output

<InlineText tone="neutralDark">neutral-dark</InlineText>
<br />
<div style={{ backgroundColor: "#222" }}>
	<InlineText tone="neutralLight">
		neutral-light (dark background) - background not included, just added so you can see here)
	</InlineText>
</div>
<br />
<InlineText tone="positive">positive</InlineText>
<br />
<InlineText tone="negative">negative</InlineText>
<br />
<InlineText tone="warning">warning</InlineText>
<br />
<InlineText tone="subtle">subtle</InlineText>

#Emphasis

Use this property to make the text's visual weight match the importance of its message.

normal (regular importance and default)
medium (moderately important)
strong (very important)

CodeHTML output

<InlineText emphasis="normal">normal (regular importance and default)</InlineText>
<br />
<InlineText emphasis="medium">medium (moderately important)</InlineText>
<br />
<InlineText emphasis="strong">strong (very important)</InlineText>

#Line height

This property is by default set to single-line, since single words or short snippets rarely wrap across multiple lines. However, when there is a possibility that this could happen, the property should be set to multi-line. An example is UI component labels, such as options in a dropdown, which can be quite long at times.

The inline text component should not be used for sentences. However, an exception is made here to illustrate how the default single-line line-height setting negatively affects the reading experience.

The inline text component should not be used for sentences. However, an exception is made here to illustrate how the multi-line line-height setting positively affects the reading experience.

CodeHTML output

<InlineText lineHeight="single-line">
	The inline text component should not be used for sentences. However, an exception is made here
	to illustrate how the default single-line line-height setting negatively affects the reading
	experience.
</InlineText>
<br />
<br />
<InlineText lineHeight="multi-line">
	The inline text component should not be used for sentences. However, an exception is made here
	to illustrate how the multi-line line-height setting positively affects the reading
	experience.
</InlineText>

#Properties

Lorem ipsum

CodePropsHTML output

Property	Description	Defined
idOptional	`string`Custom unique id	YesNo
childrenOptional	`ReactNode`Content to be displayed	YesNo
sizeOptional	`"large" \| "medium" \| "small" \| "xLarge" \| "xSmall" \| "xxLarge" \| "xxxLarge"`Controls font-size	YesNo
lineHeightOptional	`"multi-line" \| "single-line"`Controls line-height	YesNo
toneOptional	`"negative" \| "neutralDark" \| "neutralLight" \| "positive" \| "subtle" \| "warning"`Controls visual tone	YesNo
emphasisOptional	`"medium" \| "normal" \| "strong"`Controls font-weight	YesNo
data-observe-keyOptional	`string`Unique string, used by external script e.g. for event tracking	YesNo
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo
styleOptional	`object`Style object to apply custom inline styles (only intended for special cases)	YesNo

#Guidelines

#Best practices

Use for single words or short snippets. Examples include data in tables, UI component labels and parts of sentences that need to stand out.
Use the styling properties for functional, not aesthetic, purposes.
When used as part of a sentence, make sure the size, line-height and alignment property values match those of the paragraph component it is nested inside of.

#Do not use when

The text consists of one or more complete sentences. Use the paragraph component instead.
The text functions as the title of a page (section). Use the heading component instead.

Inline text

#Examples

#Default

#Size

#Tone

#Emphasis

#Line height

#Properties

#Guidelines

#Best practices

#Do not use when

#Accessibility

#Writing

#Notable Changes

#Version 0.0.x